<template>
  <div class="p-[20px] bg-white">
    <el-steps
      class="w-[800px] mb-[40px]"
      :active="active"
      finish-status="success"
      align-center
    >
      <el-step title="绑定分账方" />
      <el-step title="审核中" />
      <el-step title="绑定成功" />
    </el-steps>
    <el-form
      class="w-[800px]"
      label-width="200"
      :rules="rules"
      :model="form"
      ref="formRef"
    >
      <el-form-item label="当前支付商家名称">
        {{ form.subMerchantName }}
      </el-form-item>
      <el-form-item label="平台分账接收方名称" prop="receiverNo">
        <el-select
          v-model="form.receiverNo"
          :disabled="form.id"
          placeholder="请选择"
        >
          <el-option
            v-for="item in receivers"
            :key="item.receiverNo"
            :label="item.name"
            :value="item.receiverNo"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="合作协议附件名称" prop="entrustFileName">
        <el-input v-model="form.entrustFileName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="合作协议附件" prop="entrustFile">
        <SingleUpload
          v-model="form.entrustFile"
          :type="UploadEnum.XY"
          :extra="{ merCupNo: $route.query.merCupNo }"
          @success="
            (data) => {
              form.attFileId = data.attFileId;
            }
          "
        />
        <div class="form-helper block w-full">支持5M以内jpg/png/pdf格式</div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">保存</el-button>
        <el-button type="primary" @click="() => $router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import CommonAPI from "@/api/common";
import PaymentSplitAPI from "@/api/split";
import { UploadEnum } from "@/enums/UploadEnum";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const form = ref({
  subMerchantName: "",
  receiverNo: "",
  entrustFileName: "",
  entrustFile: "",
  attFileId: "",
});
const active = ref(0);

const receivers = ref([]);

const rules = {
  receiverNo: [{ required: true, message: "请选择", trigger: "change" }],
  entrustFileName: [{ required: true, message: "请输入", trigger: "blur" }],
  entrustFile: [{ required: true, message: "请上传", trigger: "change" }],
};

const formRef = ref();

const handleSubmit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      const submitData = {
        ...form.value,
        subMerchantId: route.query.subMerchantId,
        type: 0,
      };
      PaymentSplitAPI.bind(submitData).then((res) => {
        ElMessage.success("修改成功");
      });
    }
  });
};

const route = useRoute();

onMounted(() => {
  PaymentSplitAPI.getReceiverOptions().then((res: any) => {
    receivers.value = res;
  });
  CommonAPI.getUploadEnums().then((res: any) => {
    console.log(res);
  });
  PaymentSplitAPI.getBindDetail(route.query.subMerchantId as string).then(
    (res) => {
      if (res) {
        form.value = res;
        if (res.id) {
          active.value = res.reviewStatus === 0 ? 1 : 2;
        }
      }
    }
  );
});
</script>
